<template>
  <div class="main">
    <el-dialog
      title="更改个人资料"
      :visible.sync="showDialog"
      :close-on-click-modal="false"
      width="40vw"
      v-if="form"
    >
      <el-form :model="form" :rules="rules" ref="Form">
        <el-form-item label="性别" prop="sex">
          <el-select v-model="form.sex" placeholder="请选择性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input
            v-model="form.email"
            autocomplete="off"
            placeholder="请输入邮箱"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="phone">
          <el-input
            v-model="form.phone"
            autocomplete="off"
            placeholder="请输入手机号"
            minlength="11"
            maxlength="11"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="updateInfo">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getInfo,updateInfo } from "@network/student";

export default {
  data() {
    return {
      form: null,
      rules: {
        sex: [{ trigger: "blur", message: "请选择性别", required: true }],
        email: [
          { trigger: "blur", message: "邮箱不能为空", required: true },
          {
            pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
            message: "请填写正确的邮箱",
          },
        ],
        phone: [
          { trigger: "blur", message: "手机号不能为空", required: true },
          {
            pattern: /^1[34578]\d{9}$/, //正则校验不用字符串
            message: "请填写正确的手机号码",
            trigger: "blur",
            min: 11,
            max: 11,
          },
        ],
      },
      formLabelWidth: "240",
      showDialog: true,
    };
  },
  created() {
    getInfo().then((res) => {
      console.log("res", res);
      if (res.data.tag) {
        this.$set(this, "form", res.data.data);
        console.log(this.form, "data");
      } else {
        this.$message.warning("获取个人资料失败");
      }
    });
  },
  methods: {
    updateInfo() {
      this.$refs["Form"].validate(async (valid) => {
        if (valid) {
          let { email, phone, sex } = this.form;
          console.log({ email, phone, sex }, "{ , email, phone, sex }");
          await updateInfo({ email, phone, sex }).then((res) => {
            if (res.data.tag) {
              this.$message.success("更新个人信息成功");
              this.$emit('done')
            } else {
              this.$message.error(res.data.msg);
            }
          });
        } else {
          this.$message.warning("请核验您的表单信息");
        }
      });
    },
    cancel() {
      this.$message("已取消");
      this.$emit("done");
    },
  },
  watch: {
    showDialog(newV) {
      if (!newV) {
        this.$emit("done");
      }
    },
  },
};
</script>
<style scoped></style>
